<template>
  <div>
      <p>{{store.helloWorld}}</p>
      <p>{{store.count}}</p>
      <hr>
      <p>{{store.phoneHidden}}</p>
      <p>{{helloWorld}}</p>
      <p>{{count}}</p>
      <p>{{phoneHidden}}</p>

  </div>
</template>

<script lang="ts" setup>
import {mainstore} from '../store/index'
import { storeToRefs } from 'pinia' // 保持解构后的响应性
const store = mainstore()

// const {helloWorld, count} = store // 解构会导致响应式丢失
const {helloWorld, count, phoneHidden} = storeToRefs(store) // 保持响应性
</script>

<style>

</style>